<template>
  <el-popover placement="bottom-end" popper-class="group-more" trigger="click" width="320">
    <!-- <el-popover placement="bottom-end" popper-class="group-more" trigger="hover" width="320"> -->
    <div class="group-grid">
      <div :key="index" class="group-grid-row" v-for="index in floor">
        <div :key="keyIndex" @click="$emit('btnTouch', btn.Bcode)" class="item-grid" v-for="(btn, keyIndex) in formatBtnGroup[index-1]">
          <i :class="['item-icon', btn.icon]" />
          <div>{{btn.name}}</div>
        </div>
      </div>
    </div>
    <div @click="$emit('delete')" class="item-btn-delete">
      <i class="el-icon-delete-solid" /> 删除合辑
    </div>
    <el-button class="el-icon-more" round size="mini" slot="reference" style="margin-left:20px" />
  </el-popover>
</template>

<script>
export default {
    name: 'ArchiveCardController',
    props: {
        btnGroup: {
            type: Array,
            default() {
                const arr = [
                    { Bcode: 1, name: '编辑稿件', icon: 'el-icon-edit' },
                    { Bcode: 2, name: '编辑记录', icon: 'el-icon-document' },
                    { Bcode: 3, name: '分享稿件', icon: 'el-icon-link' },
                    { Bcode: 4, name: '添加收藏', icon: 'el-icon-folder-add' },
                    { Bcode: 5, name: '评论管理', icon: 'el-icon-chat-line-square' },
                ];
                return arr;
            },
        },
    },
    computed: {
        floor() {
            return Math.ceil(this.btnGroup.length / 4);
        },
        formatBtnGroup() {
            const arr = [];
            const copyBtnGroup = [...this.btnGroup];
            for (let i = 0; i < this.floor; i += 1) {
                const buffer = copyBtnGroup.splice(0, 4);
                arr.push(buffer);
            }
            return arr;
        },
    },
};
</script>

<style lang="scss">
.group-more {
  padding: 0;
  border-radius: 30px 0 30px 30px;
  .group-grid {
    border-radius: 30px 0 0;
    overflow: hidden;
  }
  .group-grid-row {
    border-bottom: 1px solid #e5e9ef;
    display: flex;
  }
  .item-btn-delete {
    text-align: center;
    height: 48px;
    line-height: 48px;
    color: #99a2aa;
    cursor: pointer;
    &:hover {
      background-color: #f1f3f7;
    }
  }
  .item-grid {
    width: 25%;
    padding-bottom: 10px;
    text-align: center;
    font-size: 12px;
    color: #99a2aa;
    cursor: pointer;
    .item-icon {
      padding: 20px 0 10px;
      font-size: 18px;
      color: #37c8f7;
    }
    &:hover {
      background-color: #f1f3f7;
    }
  }
}
</style>
